<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/ctx.js"></script>
</head>
<style>
    #toolbar {
        background: rgba(42, 42, 42, 0.8);
        padding: 4px;
        border-radius: 4px;
    }
    #toolbar input {
        vertical-align: middle;
        padding-top: 2px;
        padding-bottom: 2px;
    }
</style>
<body>
<div id="cesiumContainer"></div>
<div id="toolbar">
    <table>
        <tbody><tr>
            <td>Pixel Range</td>
            <td>
                <input type="range" min="1" max="200" step="1" data-bind="value: pixelRange, valueUpdate: 'input'">
                <input type="text" size="2" data-bind="value: pixelRange">
            </td>
        </tr>
        <tr>
            <td>Minimum Cluster Size</td>
            <td>
                <input type="range" min="2" max="20" step="1" data-bind="value: minimumClusterSize, valueUpdate: 'input'">
                <input type="text" size="2" data-bind="value: minimumClusterSize">
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script>
    var initCesium = new InitCesium();
    var viewer = initCesium.initViewer('cesiumContainer');

    var options = {
        camera : viewer.scene.camera,
        canvas : viewer.scene.canvas
    };
    var dataSourcePromise = viewer.dataSources.add(Cesium.KmlDataSource.load('../data/kml/facilities/facilities.kml', options));
    dataSourcePromise.then(function(dataSource) {
        var pixelRange = 15;
        var minimumClusterSize = 3;
        var enabled = true;

        dataSource.clustering.enabled = enabled;
        dataSource.clustering.pixelRange = pixelRange;
        dataSource.clustering.minimumClusterSize = minimumClusterSize;

        var removeListener;

        var pinBuilder = new Cesium.PinBuilder();
        var pin50 = pinBuilder.fromText('50+', Cesium.Color.RED, 48).toDataURL();
        var pin40 = pinBuilder.fromText('40+', Cesium.Color.ORANGE, 48).toDataURL();
        var pin30 = pinBuilder.fromText('30+', Cesium.Color.YELLOW, 48).toDataURL();
        var pin20 = pinBuilder.fromText('20+', Cesium.Color.GREEN, 48).toDataURL();
        var pin10 = pinBuilder.fromText('10+', Cesium.Color.BLUE, 48).toDataURL();

        var singleDigitPins = new Array(8);
        for (var i = 0; i < singleDigitPins.length; ++i) {
            singleDigitPins[i] = pinBuilder.fromText('' + (i + 2), Cesium.Color.VIOLET, 48).toDataURL();
        }

        function customStyle() {
            if (Cesium.defined(removeListener)) {
                removeListener();
                removeListener = undefined;
            } else {
                removeListener = dataSource.clustering.clusterEvent.addEventListener(function(clusteredEntities, cluster) {
                    cluster.label.show = false;
                    cluster.billboard.show = true;
                    cluster.billboard.id = cluster.label.id;
                    cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;

                    if (clusteredEntities.length >= 50) {
                        cluster.billboard.image = pin50;
                    } else if (clusteredEntities.length >= 40) {
                        cluster.billboard.image = pin40;
                    } else if (clusteredEntities.length >= 30) {
                        cluster.billboard.image = pin30;
                    } else if (clusteredEntities.length >= 20) {
                        cluster.billboard.image = pin20;
                    } else if (clusteredEntities.length >= 10) {
                        cluster.billboard.image = pin10;
                    } else {
                        cluster.billboard.image = singleDigitPins[clusteredEntities.length - 2];
                    }
                });
            }

            // force a re-cluster with the new styling
            var pixelRange = dataSource.clustering.pixelRange;
            dataSource.clustering.pixelRange = 0;
            dataSource.clustering.pixelRange = pixelRange;
        }

        // start with custom style
        customStyle();

        var viewModel = {
            pixelRange: pixelRange,
            minimumClusterSize: minimumClusterSize
        };
        Cesium.knockout.track(viewModel);

        var toolbar = document.getElementById('toolbar');
        Cesium.knockout.applyBindings(viewModel, toolbar);

        function subscribeParameter(name) {
            Cesium.knockout.getObservable(viewModel, name).subscribe(
                    function(newValue) {
                        dataSource.clustering[name] = newValue;
                    }
            );
        }

        subscribeParameter('pixelRange');
        subscribeParameter('minimumClusterSize');

        Sandcastle.addToggleButton('Enabled', true, function(checked) {
            dataSource.clustering.enabled = checked;
        });

        Sandcastle.addToggleButton('Custom Styling', true, function(checked) {
            customStyle();
        });

        var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        handler.setInputAction(function(movement) {
            var pickedLabel = viewer.scene.pick(movement.position);
            if (Cesium.defined(pickedLabel)) {
                var ids = pickedLabel.id;
                if (Cesium.isArray(ids)) {
                    for (var i = 0; i < ids.length; ++i) {
                        ids[i].billboard.color = Cesium.Color.RED;
                    }
                }
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    });

</script>
</body>
</html>